<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.2.1.js"></script>
    <style>
        * {margin: 0px;padding: 0px;}
        .content {
        height: 450px;
        background-image: url(images/banner.png);
        background-size: cover;
        }
        .box {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        }
        .header {
        margin-left: auto;
        margin-right: auto;
        width: 1000px;
        height: 100px;
        position: relative;
        }
        .footer {
        margin-left: auto;
        margin-right: auto;
        }
        .header-content {
        display: flex;
        position: absolute;
        bottom: 20px;
        left: -65px;
        }
        .header-left {
        width: 49px;
        height: 49px;
        background: url("images/mi-logo.png");
        background-color: rgb(245, 102, 0);
        }
        .header-right {
        margin-left: 10px;
        }
        p1 {
        text-align: center;
        font-size: 26px;
        }
        .p2 {
        text-align: center;
        font-size: 12px;
        color: rgb(143, 143, 143);
        }

        .banner_box {
        height: 370px;
        width: 336px;
        background: white;
        position: absolute;
        right: 70px;
        margin-top: 33px;
        }

        .banner_box input {
        height: 40px;
        width: 300px;
        margin-top: 20px;
        margin-left: 20px;
        font-size: 15px;
        }

        .zhanghao {
        font-size: 12px;
        float: right;
        margin-right: 96px;
        margin-top: 20px;
        word-spacing: 5px;
        text-align: center;
        }

        fieldset{
        display: inline-block;
        width: 340px;
        color: rgb(172, 167, 167);
        border: none;
        border-top: 1px solid rgb(172, 167, 167);
        text-align: center;
        margin-left: -2px;
        margin-top: 20px;
        }

        .dl {
        display: inline-block;
        margin-top: 30px;
        margin: auto;
        margin-left: 80px;
        font-size: 22px;
        color: #f56600;
        margin-right: 15px;
        }

        .bysaoma {
        display: inline-block;
        margin-top: 30px;
        font-size: 22px;
        margin-left: 15px;
        color: black;
        }

        .y_zc {
        font-size: 11px;
        float: left;
        margin-top: 10px;
        margin-left: 18px;
        }

        .icons{
        overflow: hidden;
        margin-top: 35px;
        }
        .icons span{
        display: inline-block;
        position:absolute;
        margin:auto;
        width:18px;
        height:18px;
        left:0;
        right:0;
        bottom:0;
        background:url(images/icons_type.png) no-repeat ;
        }
        a{
        text-decoration: none;
        }
        .icons a{
        margin-left: 53px;
        position: relative;
        display: inline-block;
        width:23px;
        height:21px;
        background:#333;
        border-radius: 50%;
        }
        .icons .one{background-position: -20px 0}
        .icons .two{background-position: -38px 0}
        .icons .three{background-position: -57px 0}
        .icons .four{background-position: -84px 0;width:24px;}

        .qita {
        height: 30px;
        width: 400px;
        margin: 30px auto;
        position: absolute;
        bottom: 13px;
        }

        .zhdl {
        visibility: visible;
        }

        .smdl {
        visibility: hidden;
        position: absolute;
        top: 290px;
        right: 117px;
        }
        .smdl qita{
        width: 305px;
        height: 305px;
        }

        .smdl p {
        font-size: 15px;
        text-align: center;
        }
        .footer-content {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        }
        .bottom1 {
        text-align: center;
        word-spacing: 10px;
        color: rgb(172, 167, 167);
        margin-top: 30px;
        }
        .bottom2 {
        text-align: center;
        color: rgb(172, 167, 167);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">
            <div class="header-content">
                <div class="header-left"></div>
                <div class="header-right">
                        <p class="p1">小米商城</p>
                        <p class="p2">让每个人都能享受科技的乐趣</p>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="banner_box">
                <a href="#" class="dl" id="byzhanghao" onclick="dl()">账号登录</a>
                <span style="color: #333">|</span>
                <a href="#" class="bysaoma" id="bysaoma" onclick="bysaoma()">扫码登陆</a>
                <div class="zhdl" id="zhdl">
                <form>
                    <input type="text" placeholder="邮箱/手机号/小米账号" />
                    <input type="password" placeholder="密码" />
                    <input style="background-color: #F56600; border: none; color: white;" type="submit" value="立即登录">
                </form>

                    <span class="zhanghao">
                        <a href="#" style="color: rgb(172, 167, 167);">
                            注册小米账号</a>
                        <span>|</span>
                        <a href="#" style="color: rgb(172, 167, 167);">
                            忘记密码?</a>
                    </span>
                <form>
                    <fieldset>
                        <legend>其他方式登录</legend>
                    </fieldset>
                </form>	
                    <div class="qita">
                        <div class="icons">
                            <a href="#" ><span class="one"></span></a>
                            <a href="#" ><span class="two"></span></a>
                            <a href="#" ><span class="three"></span></a>
                            <a href="#" ><span class="four"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="smdl" id="smdl">
            <img style="margin-left: 63px;" src="images/mi-logo.png" />
            </div>
        </div>

    <div class="footer">
        <div class="footer-content">
            <p class="bottom1">简体 | 繁体 | English | 常见问题 </p>
            <p class="bottom2">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    var smc = document.getElementById("bysaoma");
    var dld = document.getElementById("byzhanghao");
    var dljm = document.getElementById("zhdl");
    var smdl = document.getElementById("smdl");

    function bysaoma() {
        smc.style.color = "black";
        dld.style.color = "black";
        dljm.style.visibility = "hidden";
        smdl.style.visibility = "visible";

    }

    function dl() {
        smc.style.color = "black";
        dld.style.color = "black";
        dljm.style.visibility = "visible";
        smdl.style.visibility = "hidden";
    }
</script>
</body>
</html>